<template>
  <div style="width:88%;margin: 10px auto">
    <el-row style="height: 60px;horiz-align: center">
      <el-select
        style="margin-top:20px;margin-left: 10px;" clearable placeholder="请选择数据"
        @change="changeDataFields">
        <el-option
          v-for="item in options"
          v-bind:key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" round
                 @click="newProject()"
                 style="float:right">
        <i class="el-icon-circle-plus-outline"></i>
        新建项目
      </el-button>
      <el-button @click="transChartData">显示图表</el-button>
    </el-row>
    <el-row>
      <myChart :chartData="chartData" ref="myChart"></myChart>
    </el-row>
    <!--<el-row>-->
      <!--<el-button @click="dataView" type="primary" round>可视化</el-button>-->

    <!--</el-row>-->
    <div>
      <v_exploreDialog :explore-visible="exploreVisible"></v_exploreDialog>
    </div>
    <div id="echarts">
      <v_chartDialog :chart-visible="chartVisible" ref="chart"></v_chartDialog>
    </div>
    <!--<v_position :position-visible="positionVisible"></v_position>-->
    <!--<v_fileDialog :file-visible="fileVisible"></v_fileDialog>-->
    <!--<v_dataDialog></v_dataDialog>-->
  </div>
</template>

<script>
    import proTable from "../../components/table/exploreTable";
    import ExploreDialog from '../../components/dialog/exploreDialog';
    import chartDialog from '../../components/dialog/chartDialog';
    import positionDialog from '../../components/dialog/positionDialog';
    // import FileDialog from '../../components/dialog/filePositionDialog';
    import dataDialog from '../../components/dialog/dataDialog';
    import myChart from '../../components/echarts/myChart'

    export default {
      name: "dataexplore",
      data() {
        return {
          expData: null,
          exploreVisible: {
            v: false
          },
          // chartVisible: {
          //   v:false
          // },
          positionVisible:{
            v:false
          },
          fileVisible:{
            v:false
          },
          options: [],
        }
      },
      components: {
        "proTable":proTable,
        "v_exploreDialog": ExploreDialog,
        // "v_chartDialog": chartDialog,
        // "v_position":positionDialog,
        // "v_fileDialog": FileDialog,
        // "v_dataDialog": dataDialog,
        "myChart":myChart,
      },
      props:{
      },
      methods: {
        // getAllProjects() {
        //   //TODO 数据查询及处理
        //   this.$refs.exploreTable.getProjectData();
        // },
        // refresh(){
        //   this.$refs.exploreTable.task=[];
        //   this.$refs.exploreTable.getProjectData();
        // },
        showTable() {
          let that = this;
          this.$axios.get('/data/list?offset=0&size=100')
            .then(function (res) {
              if (res.code === 200) {
                let result = res.body.data;
                let options = [];
                // let selOption=[];
                for (let i = 0; i < result.length; i++) {
                  let option = {};
                  option.value = result[i].data.pk_meta_id;
                  option.label = result[i].data.meta_name;
                  option.id=i;
                  options.push(option);
                }
                that.options = options;
                // that.selOption=selOption;
              } else {
                // TODO 优化
                alert(res.message);
              }
            }).catch(function (err) {
            console.log(err);
          })
        },
        transChartData(){
          // this.$axios.get()
        },
        newProject(){
          //TODO 新建项目
          this.$Bus.$emit('exploreVisible.v',true);
        },
        showCardView(){
          //TODO 平铺显示
        },
        showListView(){
          //TODO 平铺显示
        },
        getDataExploreProj(){
        //   this.$axios.get('static/json/dataexplore.json',{
        //     params:{userid: "userid"}
        //   }).then(res=>{this.expData=res.data})
        },
        dataView(){
            window.open(location.protocol+"dataVisible", 'blank');
            //this.$router.replace("/dataView");
        },
      },
      mounted(){
        // this.getAllProjects();
        this.showTable();
      },
    }
</script>

<style>
  .el-input--prefix .el-input__inner{
    border-radius: 20px;
  }
</style>

